Progressiivne täiustamine: funktsioonide tuvastamine – vastupidavate veebikogemuste loomine ülemaailmsele vaatajaskonnale

Pidevalt arenevas internetimaastikus on ülimalt oluline tagada, et teie veebirakendused oleksid juurdepääsetavad, toimivad ja tulevikukindlad. Üks tõhusamaid strateegiaid selle saavutamiseks on progressiivne täiustamine, disainifilosoofia, mis rõhutab põhifunktsionaalsuse loomist, mis töötab paljudes seadmetes ja brauserites, lisades samal ajal täiustusi, mis põhinevad kasutaja keskkonna võimalustel. Progressiivse täiustamise oluline komponent on funktsioonide tuvastamine, mis võimaldab arendajatel kindlaks teha, kas brauser toetab konkreetset funktsiooni enne selle rakendamist. See lähenemisviis tagab järjepideva kasutajakogemuse, eriti maailma mitmekesises tehnoloogilises maastikus.

Mis on progressiivne täiustamine?

Progressiivne täiustamine on veebiarendusstrateegia, mis algab tugeva ja ligipääsetava vundamendiga ning seejärel lisab täiustatud funktsioone vastavalt brauseri või seadme võimalustele. See lähenemisviis seab esikohale sisu ja põhifunktsionaalsuse kõigi kasutajate jaoks, olenemata nende seadmest, brauserist või internetiühendusest. See hõlmab ideed, et veeb peaks olema kasutatav ja informatiivne kõigile, kõikjal.

Progressiivse täiustamise põhiprintsiibid on järgmised:

• Sisu kõigepealt: Teie veebisaidi aluseks peaks olema hästi struktureeritud, semantiliselt korrektne HTML, mis pakub põhisisu.
• Põhifunktsionaalsus: Veenduge, et põhifunktsionaalsus töötab ilma JavaScripti lubamata või põhilise CSS-i toega. See tagab kasutatavuse isegi kõige lihtsamates sirvimiskeskkondades.
• Võimalustel põhinevad täiustused: Järk-järgult lisage täiustatud funktsioone, nagu JavaScripti-põhised interaktsioonid, CSS-animatsioonid või kaasaegsed HTML5 elemendid, ainult siis, kui kasutaja brauser neid toetab.
• Juurdepääsetavus: Disainige juurdepääsetavust silmas pidades algusest peale. Veenduge, et teie veebisait on kasutatav puuetega inimestele, järgides WCAG (Web Content Accessibility Guidelines) standardeid.

Miks on funktsioonide tuvastamine oluline

Funktsioonide tuvastamine on progressiivse täiustamise nurgakivi. Selle asemel, et tugineda brauseri nuusutamisele (kasutaja brauseri tuvastamine selle kasutajaagendi stringi alusel), keskendub funktsioonide tuvastamine sellele, mida brauser *saab* teha. See on palju usaldusväärsem lähenemisviis, sest:

• Brauseri erinevused: Erinevad brauserid tõlgendavad ja rakendavad funktsioone erinevalt. Funktsioonide tuvastamine võimaldab teil kohandada oma koodi iga brauseri võimalustega.
• Tulevikukindlus: Brauserite arenedes võetakse pidevalt kasutusele uusi funktsioone. Funktsioonide tuvastamine võimaldab teie rakendusel nende muudatustega kohaneda, ilma et oleks vaja vanemate brauserite jaoks koodi muuta.
• Kasutaja seadete haldamine: Kasutajad saavad teatud brauseri funktsioone (nt JavaScripti või CSS-animatsioonid) keelata. Funktsioonide tuvastamine võimaldab teil austada kasutaja eelistusi, kohandades end nende valitud seadetega.
• Toimivus: Vältige tarbetu koodi ja ressursside laadimist, kui kasutaja brauser konkreetset funktsiooni ei toeta. See parandab lehe laadimisaega ja parandab kasutajakogemust.

Funktsioonide tuvastamise meetodid

Brauseri funktsioonide tuvastamiseks on mitu meetodit, millest igaühel on oma tugevad ja nõrgad küljed. Kõige tavalisem meetod kasutab JavaScripti, et kontrollida konkreetse funktsiooni või API olemasolu.

1. JavaScripti kasutamine funktsioonide kontrollimiseks

See meetod on kõige levinum ja paindlikum. Saate kontrollida konkreetse brauseri funktsiooni kättesaadavust JavaScripti koodi abil.

Näide: API `fetch` kontrollimine (JavaScript andmete võtmiseks võrgust)

            
if ('fetch' in window) {
  // API 'fetch' on toetatud. Kasutage seda andmete laadimiseks.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Töötle andmeid
    })
    .catch(error => {
      // Käsitse vigu
    });
} else {
  // API 'fetch' ei ole toetatud. Kasutage varumehhanismi nagu XMLHttpRequest.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Töötle andmeid
    } else {
      // Käsitse vigu
    }
  };
  xhr.onerror = function() {
    // Käsitse vigu
  };
  xhr.send();
}

            

              
                Copy
              
            
          

Selles näites kontrollib kood, kas atribuut `fetch` on objekti `window` olemas. Kui on, toetab brauser API-t `fetch` ja kood saab seda kasutada. Vastasel juhul rakendatakse varumehhanismi (kasutades `XMLHttpRequest`).

Näide: `classList` API toe kontrollimine

            
if ('classList' in document.body) {
  // Brauser toetab classList. Kasutage classList meetodeid (nt add, remove)
  document.body.classList.add('has-js');
} else {
  // Brauser ei toeta classList. Kasutage alternatiivseid meetodeid.
  // nt stringidega manipuleerimine CSS klasside lisamiseks ja eemaldamiseks
  document.body.className += ' has-js';
}

            

              
                Copy
              
            
          

2. CSS-i funktsioonipäringute (`@supports`) kasutamine

CSS-i funktsioonipäringud, mida tähistab `@supports` at-reegel, võimaldavad teil rakendada CSS-i reegleid sõltuvalt sellest, kas brauser toetab konkreetseid CSS-i funktsioone või atribuutide väärtusi.

Näide: `@supports` kasutamine paigutuse kujundamiseks Grid Layouti abil

            
.container {
  display: flex; /* Varundamine brauseritele, millel puudub ruudustik */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

            

              
                Copy
              
            
          

Selles näites kasutab `.container` algselt `flex` paigutust (laialdaselt toetatud funktsioon). Reegel `@supports` kontrollib, kas brauser toetab `display: grid`. Kui see nii on, rakendatakse reegli sees olevaid stiile, tühistades esialgse flex-paigutuse ruudupaigutusega.

3. Raamatukogud ja raamistikud

Mitmed raamatukogud ja raamistikud pakuvad sisseehitatud funktsioonide tuvastamise võimalusi või utiliite, mis lihtsustavad protsessi. Need võivad eemaldada konkreetsete funktsioonide kontrollimise keerukuse. Levinud näited on:

• Modernizr: Populaarne JavaScripti teek, mis tuvastab laia valiku HTML5 ja CSS3 funktsioone. See lisab klassid elemendile ``, võimaldades teil rakendada stiile või käivitada JavaScripti vastavalt funktsioonide toele.
• Polyfills: Teatud tüüpi kood, mis pakub puuduva brauseri funktsiooni jaoks varundust. Neid kasutatakse sageli koos funktsioonide tuvastamisega, et tuua kaasaegne funktsionaalsus vanematele brauseritele.

Näide: Modernizri kasutamine

            
<html class="no-js" >
<head>
  <!-- Muud meta-sildid jne. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Rakenda border-radius stiile
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Selles stsenaariumis lisab Modernizr klassi `borderradius` elemendile ``, kui brauser toetab `border-radius`. Seejärel kontrollib JavaScripti kood seda klassi ja rakendab vastava stiili.

Praktilised näited ja globaalsed kaalutlused

Uurime mõningaid praktilisi näiteid funktsioonide tuvastamisest ja selle rakendamisest, võttes arvesse globaalseid kaalutlusi, nagu juurdepääsetavus, rahvusvahelistumine (i18n) ja jõudlus.

1. Responsiivsed pildid

Responsiivsed pildid on olulised optimaalse pildi suuruse edastamiseks, mis põhineb kasutaja seadmel ja ekraani suurusel. Funktsioonide tuvastamine võib mängida olulist rolli nende tõhusas rakendamises.

Näide: `srcset` ja `sizes` toe kontrollimine

`srcset` ja `sizes` on HTML-i atribuudid, mis pakuvad teavet pildi allika valikute kohta brauserile, võimaldades sellel valida praeguse konteksti jaoks kõige sobivama pildi.

            
<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Pildi kirjeldus"
>

            

              
                Copy
              
            
          

Atribuut `srcset` määrab pildi allikate loendi koos nende laiustega. Atribuut `sizes` pakub teavet pildi kavandatud kuvamissuuruse kohta, mis põhineb meediapäringutel.

Kui brauser ei toeta `srcset` ja `sizes`, saate kasutada JavaScripti ja funktsioonide tuvastamist, et saavutada sarnane tulemus. Raamatukogud nagu `picturefill` pakuvad vanematele brauseritele polütäidet.

            
if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // Kasutage polütäidet nagu picturefill.js
  // Link picturefillile: https://scottjehl.github.io/picturefill/
  console.log('Kasutan picturefill polütäidet');
}

            

              
                Copy
              
            
          

See lähenemisviis tagab, et kõik kasutajad saavad optimeeritud pilte, olenemata nende brauserist.

2. Veebianimatsioonid

CSS-animatsioonid ja üleminekud võivad oluliselt parandada kasutajakogemust, kuid need võivad olla mõnele kasutajale ka häirivad või problemaatilised. Funktsioonide tuvastamine võimaldab teil neid animatsioone pakkuda ainult vajaduse korral.

Näide: CSS-i üleminekute ja animatsioonide toe tuvastamine

            
if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Rakenda animatsiooniklasse
  document.body.classList.add('animations-enabled');
} else {
  // Kasutage staatilist UI-d või lihtsamat kogemust ilma animatsioonideta
  document.body.classList.add('animations-disabled');
}

            

              
                Copy
              
            
          

Animatsioonide keelamisega vanemate brauseritega kasutajatele või kui kasutaja on avaldanud eelistuse vähendatud liikumise vastu (meediapäringu `prefers-reduced-motion` kaudu), saate pakkuda sujuvamat ja kaasavamat kogemust.

Globaalsed kaalutlused animatsioonide puhul: Arvestage, et mõnel kasutajal võivad olla vestibulaarsed häired või muud seisundid, mida animatsioonid võivad vallandada. Pakkuge alati võimalust animatsioonid keelata. Austage kasutaja seadistust `prefers-reduced-motion`.

3. Vormi valideerimine

HTML5 tutvustas võimsaid vormi valideerimise funktsioone, nagu nõutavad väljad, sisestustüübi valideerimine (nt e-post, number) ja kohandatud veateated. Funktsioonide tuvastamine võimaldab teil neid funktsioone ära kasutada, pakkudes samal ajal elegantseid varundusi.

Näide: HTML5 vormi valideerimise toe kontrollimine

            
if ('checkValidity' in document.createElement('input')) {
  // Kasutage HTML5 vormi valideerimist.
  // See on sisseehitatud ja ei vaja JavaScripti
} else {
  // Rakendage JavaScripti-põhist vormi valideerimist.
  // Raamatukogu nagu Parsley.js võib olla kasulik:
  // https://parsleyjs.org/
}

            

              
                Copy
              
            
          

See tagab, et vanemate brauseritega kasutajad saavad endiselt vormi valideerimist, isegi kui see on rakendatud JavaScripti abil. Kaaluge serveripoolse valideerimise pakkumist lõpliku turva- ja töökindluse kihina.

Globaalsed kaalutlused vormi valideerimise puhul: Veenduge, et teie veateated on lokaliseeritud ja juurdepääsetavad. Esitage selged ja lühikesed veateated kasutaja keeles. Arvestage, kuidas erinevaid kuupäeva- ja numbrivorminguid globaalselt kasutatakse.

4. Täiustatud paigutustehnikad (nt CSS Grid)

CSS Grid Layout pakub võimsa võimaluse luua keerulisi ja responsiivseid paigutusi. Siiski on oluline tagada, et vanemate brauseritega käsitletakse graatsiliselt.

Näide: CSS Grid'i kasutamine koos varundusega

            
.container {
  display: flex;  /* Varundamine vanematele brauseritele */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

            

              
                Copy
              
            
          

See kood kasutab `flexbox` varundusena brauseritele, mis ei toeta `grid`. Kui brauser toetab `grid`, renderdatakse paigutus ruudustiku abil. See lähenemisviis loob responsiivse paigutuse, mis vanemates brauserites graatsiliselt laguneb.

Globaalsed kaalutlused paigutuse puhul: Disainige erinevate ekraani suuruste, kuvasuhete ja sisestusmeetodite jaoks (nt puutetundlikud ekraanid, klaviatuuriga navigeerimine). Testige oma paigutusi erinevates globaalselt kasutatavates seadmetes ja brauserites. Kaaluge paremalt vasakule (RTL) keeletuge, kui teie sihtrühm hõlmab kasutajaid, kes loevad RTL-skripte (nt araabia, heebrea).

Funktsioonide tuvastamise parimad tavad

Funktsioonide tuvastamise tõhususe maksimeerimiseks järgige neid parimaid tavasid:

• Seadke esikohale sisu ja funktsionaalsus: Veenduge alati, et põhisisu ja funktsionaalsus toimiksid ilma JavaScriptita või minimaalse stiiliga.
• Ärge lootke brauseri nuusutamisele: Vältige brauseri nuusutamist, kuna see on ebausaldusväärne ja altid vigadele. Funktsioonide tuvastamine on parem lähenemisviis.
• Testige põhjalikult: Testige oma funktsioonide tuvastamise rakendusi paljudes brauserites ja seadmetes, sealhulgas vanemates versioonides ja mobiilseadmetes. Kasutage brauseri arendustööriistu erinevate kasutajaagentide ja võrgutingimuste simuleerimiseks. Ristbrauseri testimine on ülemaailmse vaatajaskonna jaoks hädavajalik.
• Kasutage raamatukogusid targalt: Kasutage funktsioonide tuvastamise raamatukogusid ja polütäiteid, kui need lihtsustavad protsessi ja on hästi hooldatud. Siiski vältige ülemäärast sõltuvust, kuna need võivad suurendada teie veebisaidi failisuurust ja keerukust. Hinnake hoolikalt nende mõju jõudlusele.
• Dokumenteerige oma kood: Dokumenteerige oma funktsioonide tuvastamise kood selgelt, selgitades, miks te tuvastate konkreetset funktsiooni ja millist varustrateegiat te kasutate. See aitab kaasa hooldusele ja koostööle.
• Võtke arvesse kasutaja eelistusi: Austage kasutaja eelistusi, nagu meediapäring `prefers-reduced-motion`.
• Seadke esikohale jõudlus: Funktsioonide tuvastamine võib parandada jõudlust, vältides tarbetu koodi laadimist. Pidage meeles tuvastamisloogika mõju lehe laadimisaegadele.
• Hoidke see lihtsana: Ülemäära keerulist funktsioonide tuvastamise loogikat võib olla raske hooldada. Hoidke oma funktsioonide tuvastamine võimalikult lihtsa ja otsesena.

Juurdepääsetavuse (a11y) käsitlemine funktsioonide tuvastamisel

Juurdepääsetavus on progressiivse täiustamise oluline komponent. Funktsioonide tuvastamine aitab tagada, et teie veebisait on puuetega kasutajatele juurdepääsetav.

• Pakkuge alternatiive: Kui funktsioon pole toetatud, pakkuge juurdepääsetavat alternatiivi. Näiteks kui kasutate CSS-animatsioone, pakkuge võimalust need keelata (nt meediapäringu `prefers-reduced-motion` abil).
• Kasutage ARIA atribuute: Kasutage ARIA (Accessible Rich Internet Applications) atribuute, et parandada oma dünaamilise sisu ja UI elementide juurdepääsetavust. ARIA pakub semantilist teavet abistavatele tehnoloogiatele, nagu ekraanilugejad.
• Tagage klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid oleksid klaviatuuri abil juurdepääsetavad. Testige oma veebisaiti klaviatuuriga, et veenduda, et kasutajad saavad kõigi funktsioonidega navigeerida ja suhelda.
• Esitage semantiline HTML: Kasutage semantilisi HTML-elemente (nt <nav>, <article>, <aside>), et anda oma sisule struktuur, muutes selle abistavatel tehnoloogiatel hõlpsamini mõistetavaks.
• Testige ekraanilugejatega: Testige regulaarselt oma veebisaiti ekraanilugejatega, et tagada, et nägemispuudega kasutajad saavad teie sisule ja funktsionaalsusele juurde pääseda.
• Järgige WCAG juhiseid: Järgige WCAG (Web Content Accessibility Guidelines) juhiseid, et tagada, et teie veebisait vastab juurdepääsetavuse standarditele.

Rahvusvahelistumine (i18n) ja funktsioonide tuvastamine

Ülemaailmse veebisaidi loomisel kaaluge i18n-i. Funktsioonide tuvastamine võib aidata teie i18n-i jõupingutusi, hõlbustades keelespetsiifilist sisu ja käitumist.

• Tuvastage keele-eelistused: Tuvastage kasutaja eelistatud keel, kasutades atribuuti `navigator.language` või kontrollides brauseri saadetud päist `Accept-Language`. Kasutage seda teavet vastavate keelefailide laadimiseks või sisu dünaamiliseks tõlkimiseks. Paljud JavaScripti i18n-i teegid, nagu `i18next`, kasutavad funktsioonide tuvastamist.
• Kasutage funktsioonide tuvastamist lokaliseerimiseks: Tuvastage funktsioonide, nagu kuupäeva ja kellaaja vormindamise, numbri vormindamise ja valuuta vormindamise tugi. Kasutage sobivaid teeke või natiivseid brauseri API-sid, et vormindada sisu õigesti, lähtudes kasutaja lokaadist.
• Kohandage paigutusi RTL-keelte jaoks: Kasutage funktsioonide tuvastamist, et tuvastada kasutaja keel ja kohandada oma paigutust vastavalt paremalt vasakule (RTL) keelte jaoks. Näiteks võite kasutada atribuuti `dir` elemendil ``, et muuta teksti ja paigutuse suunda.
• Võtke arvesse kultuurikonventsioone: Pöörake tähelepanu kuupäevade, kellaaegade ja valuutadega seotud kultuurikonventsioonidele. Veenduge, et teie veebisait kuvab seda teavet viisil, mis on kasutaja piirkonna jaoks arusaadav ja asjakohane.

Kokkuvõte: tuleviku ehitamine

Progressiivne täiustamine ja funktsioonide tuvastamine ei ole lihtsalt tehnilised tavad; need on veebiarenduse põhiprintsiibid, mis võimaldavad teil luua kaasavaid, jõudlusega ja vastupidavaid veebikogemusi ülemaailmsele vaatajaskonnale. Neid strateegiaid omaks võttes saate luua veebisaite, mis kohanduvad pidevalt muutuva tehnoloogilise maastikuga, tagades, et teie sisu on juurdepääsetav ja kaasav kõigile kasutajatele, olenemata nende seadmest, brauserist või asukohast. Keskendudes põhifunktsionaalsusele, omaks võttes funktsioonide tuvastamise ja seades esikohale juurdepääsetavuse, loote kõigile tugevama ja kasutajasõbralikuma veebikogemuse.

Kuna veeb areneb edasi, suureneb progressiivse täiustamise tähtsus ainult. Neid praktikaid täna kasutusele võttes investeerite oma veebirakenduste tulevikku ja tagate nende edu ülemaailmses digitaalses ökosüsteemis.

Rakendatavad arusaamad:

• Alustage tugeva vundamendiga: Ehitage oma veebisaidi põhisisu semantilise HTML-i abil.
• Võtke omaks funktsioonide tuvastamine: Kasutage JavaScripti ja CSS-i funktsioonipäringuid, et parandada oma kasutajakogemust.
• Seadke esikohale juurdepääsetavus: Disainige oma veebisait juurdepääsetavust silmas pidades algusest peale.
• Testige rangelt: Testige oma veebisaiti erinevates brauserites ja seadmetes, sealhulgas vanemates versioonides ja mobiilseadmetes.
• Kaaluge i18n-i: Planeerige oma veebisait rahvusvahelistumiseks, tagades, et teie sisu on ülemaailmsele vaatajaskonnale juurdepääsetav ja asjakohane.